<!--vue模板-->
<template>
  <el-dialog
    title="选择产品"
    v-model="visible"
    :closeOnClickModal="false"
    @close="close"
    width="1000px"
  >
    <!--工具条-->
    <div class="toolbar">
      <el-button type="primary" @click="choose">确定</el-button>
      <el-button @click="close">取消</el-button>
      查询条件
      <el-input placeholder="请输入产品名称" class="searchipt" v-model="filters.name" :clearable="true"></el-input>&nbsp;
      <el-input placeholder="请输入产品编码" class="searchipt" v-model="filters.code" :clearable="true"></el-input>&nbsp;
      <el-input placeholder="请输入产品规格" class="searchipt" v-model="filters.specification"  :clearable="true"></el-input>&nbsp;
      <el-button type="primary" @click="initData">查询</el-button>
    </div>

    <!--工作区-->
    <el-row>
      <!--类别树-->
      <el-col :span="4" class="left">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all="true"
          @node-click="queryProduct"
        />
      </el-col>
      <el-col :span="20">
        <!--表格数据 -->
        <el-table :data="tableData" style="width: 100%" stripe border   @selection-change="chg">
          <el-table-column
            type="selection"
            width="60"
            header-align="center"
            align="center"
          />
          <el-table-column
            type="index"
            label="序号"
            width="60"
            header-align="center"
            align="center"
          />
          <el-table-column prop="code" label="编码" header-align="center" />
          <el-table-column prop="name" label="名称" header-align="center" />
          <el-table-column prop="specification" label="规格" header-align="center" />
        </el-table>
        <!--分页-->
        <el-pagination
          @current-change="pagechange"
          @size-change="chgsize"
          @update:page-size="pageSize"
          class="page"
          background
          layout="total,sizes, prev, pager, next,jumper"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<!--vue 组件选项定义-->
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "childs",
        label: "name",
      },
      treeData: [], //树形数据
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      selectData:[],//用来存放选择的数据 
      filters:{
        code:"",
        name:"",
        specification:"",
        categoryCode:""
      }
    };
  },
  emits: ["update:visible","chooseProduct"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.queryTree();
    this.initData();
  },
  methods: {
    //确认
    choose(){
        if( this.selectData.length==0){
            this.$message.warning("请选择产品！");
            return;
        }

        //抛出自定义事件  传递数据 
        this.$emit("chooseProduct",this.selectData);
        this.close();
    },
    //当复选框选中时执行 
    chg(selection){
       this.selectData=selection;
    },
    initData() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        code:this.filters.code,
        name:this.filters.name,
        specification:this.filters.specification,
        categoryCode:this.filters.categoryCode
      };
      this.$http.post("/api/product/query2", param).then((res) => {
        //判断接口数据是否正常
        if (res.code == 200) {
          this.tableData = res.result.data;
          this.page = res.result.page;
          this.pageSize = res.result.pageSize;
          this.total = res.result.total;
        }
      });
    },

    //点击类别
    queryProduct(node){
        this.filters.categoryCode=node.code;
        this.page=1;
        this.initData();
    },
    //查询部门树
    queryTree() {
      this.$http.get("/api/category/tree", { pid: "0" }).then((res) => {
        if (res.code == 200) {
          this.treeData = res.result;
        }
      });
    },
    close() {
      this.$emit("update:visible", false);
    },

    //页数改变
    pagechange(page) {
      this.page = page;
      this.initData();
    },

    //每页条数改变
    chgsize(pgsize) {
      //当每页记录数变化时，总页数跟着改变
      this.page = 1; //必须从第1页开始查
      this.pageSize = pgsize;
      this.initData();
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.searchipt {
  width: 200px;
}
.toolbar {
  height: 50px;
  line-height: 50px;
  border-style: none;
  border-bottom: #c0ccdd solid 1px;
  margin-bottom: 15px;
}

.left {
  border-style: none;
  border-right: #c0ccdd solid 1px;
}

.page {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}

</style>
